<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>04_class与style绑定</title>
	<style>
		.classA{
			color: red;
		}
		.classB{
			color: blue;
		}
		.classC{
			font-size: 30px;
		}
	</style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->
   <div id="demo">
   	  <h2>1. class绑定: :class='xxx'</h2>
   	  <p :class='addClass'>xxx是字符串</p>
   	  <p :class='{classA:isA,classB:isB}' class="classC">xxx是对象</p>
   	  <p :class="['classB','classC:false']">xxx是数组</p>

   	  <h2>2. style绑定</h2>
   	  <p :style="{color:activeColor,fontSize:fontSize + 'px'}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>



   	  <button @click="changeClass">update</button>
   </div>
</body>



<script src="../js/vue.js"></script>
<script>
	const vm = new Vue({
		el: '#demo',
		data: {
		   addClass: 'classA',
		   isA: true,
		   isB: false,
		   activeColor: 'green',
		   fontSize: 40
		},
		methods: {
			changeClass: function(){
				this.addClass = 'classB';
				this.isA = false;
				this.isB = true;
				this.activeColor = 'yellow';
				this.fontSize = 10;
			}
		}
	})
</script>
</html>